<html><head><meta charset="utf-8"><title>15 Webpack 中配置React和Vue开发环境-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/29" target="_blank">Webpack 从零入门到工程化实战</a>
                    <a href="" target="_blank">
                        <span>
                            / 2-9 15 Webpack 中配置React和Vue开发环境
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                15 Webpack 中配置React和Vue开发环境
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-06-24 09:27:56
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img2.mukewang.com/5cd963bb0001a96f06400359.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">上天赋予的生命，就是要为人类的繁荣和平和幸福而奉献。<p class="author">——松下幸之助</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">当下前端最火的两个框架就是了 React 和 Vue 了，本篇文章主要介绍手动配置 Webpack 来做 React 和 Vue 的开发。</p>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Facebook 官方推出的 <a href="https://github.com/facebook/create-react-app">create-react-app</a> ，Vue 也有自己的 CLI 工具 <a href="https://cli.vuejs.org/zh/">Vue-CLI</a>，两个工具都已经非常好用，但在实际项目中，我们仍然需要做一些修改才可以满足实际项目上线的需求，同时我们仍希望有更多所谓个性化设置来支持项目。所以掌握 Webpack 中 React 和 Vue 的配置还是很有必要的事情。</p>
</blockquote>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">Webpack 的基本配置讲解部分已经接近尾声，下面我们完全按照一个新项目来创建 React 和 Vue 的 Webpack 配置，通过项目的配置帮助我们回忆下 Webpack 基本配置的一些知识点。</p>
</div><div class="cl-preview-section"><h2 id="webpack-中配置-react-的开发" style="font-size: 30px;">Webpack 中配置 React 的开发</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">首先是创建目录、初始化 package.json、安装 React、安装 Webpack 和安装 Babel。</p>
</div><div class="cl-preview-section"><pre class="  language-bash"><code class="prism  language-bash"><span class="token comment"># 新建目录，并且进入</span>
<span class="token function">mkdir</span> react-webpack <span class="token operator">&amp;&amp;</span> <span class="token function">cd</span> <span class="token variable">$_</span>
<span class="token comment"># 创建 package.json</span>
<span class="token function">npm</span> init -y
<span class="token comment"># 安装 react react-dom依赖</span>
<span class="token function">npm</span> i react react-dom
<span class="token comment"># 安装 webpack 和 webpack-cli 开发依赖</span>
<span class="token function">npm</span> i webpack webpack-cli -D
<span class="token comment"># 安装 babel</span>
<span class="token function">npm</span> i babel-loader @babel/core @babel/preset-env -D
<span class="token comment"># 安装 babel preset-react</span>
<span class="token function">npm</span> i @babel/preset-react -D
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">因为 React 中提供了一种 JavaScript 的扩展语法，React 将它们命名为 <a href="https://reactjs.org/docs/introducing-jsx.html">jsx</a>，所以在这里我们需要给 jsx 文件添加 Babel 的编译支持，现在我们新建一个 webpack.config.js 的配置文件，内容和注释如下：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    resolve<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        extensions<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'.wasm'</span><span class="token punctuation">,</span> <span class="token string">'.mjs'</span><span class="token punctuation">,</span> <span class="token string">'.js'</span><span class="token punctuation">,</span> <span class="token string">'.json'</span><span class="token punctuation">,</span> <span class="token string">'.jsx'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.jsx?$/</span><span class="token punctuation">,</span> <span class="token comment">// jsx/js文件的正则</span>
                exclude<span class="token punctuation">:</span> <span class="token regex">/node_modules/</span><span class="token punctuation">,</span> <span class="token comment">// 排除 node_modules 文件夹</span>
                use<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                    <span class="token comment">// loader 是 babel</span>
                    loader<span class="token punctuation">:</span> <span class="token string">'babel-loader'</span><span class="token punctuation">,</span>
                    options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                        <span class="token comment">// babel 转义的配置选项</span>
                        babelrc<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
                        presets<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                            <span class="token comment">// 添加 preset-react</span>
                            require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'@babel/preset-react'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                            <span class="token punctuation">[</span>require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'@babel/preset-env'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>modules<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
                        <span class="token punctuation">]</span><span class="token punctuation">,</span>
                        cacheDirectory<span class="token punctuation">:</span> <span class="token boolean">true</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Tips： 注意这里将 Babel 的配置直接放到<code>webpack.config.js</code>中，没有单独放到<code>.babelrc</code>，这是一个推荐写法，因为在某些打包（上线构建）机器，对于<code>.</code>开头的 dotFile 支持并不好，所以建议<code>.babelrc</code>这类 dotFile 在<code>webpack.config.js</code>中显性声明，显性声明的配置还能第一时间在 Webpack 配置中被找到。</p>
</blockquote>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">然后在<code>src</code>文件夹下创建一个<code>App.jsx</code>的文件：</p>
</div><div class="cl-preview-section"><pre class="  language-jsx"><code class="prism  language-jsx"><span class="token comment">// App.jsx</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>Hello React and Webpack<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>App</span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'app'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在创建一个<code>index.jsx</code>文件：</p>
</div><div class="cl-preview-section"><pre class="  language-jsx"><code class="prism  language-jsx"><span class="token comment">// index.jsx</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App'</span><span class="token punctuation">;</span> <span class="token comment">// 这里可以省略.jsx</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在 webpack.config.js 中添加 entry：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    entry<span class="token punctuation">:</span> <span class="token string">'./src/index.jsx'</span>
    <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这时候可以执行下<code>npx webpack --mode development</code>看下，文件已经打出来了。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><img src="http://img.mukewang.com/5cf46f88000195e817940696.png" alt="图片描述" data-original="http://img.mukewang.com/5cf46f88000195e817940696.png" class="" style="cursor: pointer;"><br>
接下来我们创建一个 HTML 文件（<code>src/index.html</code>），作为项目的模板，内容如下：</p>
</div><div class="cl-preview-section"><pre class="  language-html"><code class="prism  language-html"><span class="token doctype">&lt;!DOCTYPE html&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zh-CN<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Hello React Webpack<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们需要使用 <a href="https://github.com/jantimon/html-webpack-plugin">html-webpack-plugin</a> 插件来复制 index.html 到 dist 文件夹下：</p>
</div><div class="cl-preview-section"><pre class="  language-bash"><code class="prism  language-bash"><span class="token comment"># 首先是安装 html-webpack-plugin</span>
<span class="token function">npm</span> i html-webpack-plugin -D
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">修改 webpack.config.js</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">//webpack.config.js</span>
<span class="token keyword">const</span> HtmlWebPackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'html-webpack-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token keyword">new</span> <span class="token class-name">HtmlWebPackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            template<span class="token punctuation">:</span> <span class="token string">'src/index.html'</span><span class="token punctuation">,</span>
            filename<span class="token punctuation">:</span> <span class="token string">'index.html'</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">完成之后，执行<code>npx webpack --mode development</code>就可以看到打包结果了：</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><img src="http://www.imooc.com/read/29/article/img/react-1.png" alt="" data-original="http://www.imooc.com/read/29/article/img/react-1.png" class="" style="cursor: pointer;"></p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">好了，现在可以将命令放到<code>npm</code>的<code>scripts</code>了：</p>
</div><div class="cl-preview-section"><pre class="  language-json"><code class="prism  language-json"><span class="token punctuation">{</span>
    <span class="token string">"scripts"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token string">"build"</span><span class="token punctuation">:</span> <span class="token string">"webpack --mode production"</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><h3 id="react-的开发阶段配置">React 的开发阶段配置</h3>
</div><div class="cl-preview-section"><h4 id="配置-react-开发的-webpack-dev-server" style="font-size: 26px;">配置 React 开发的 webpack-dev-server</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">首先使用<a href="https://github.com/webpack/webpack-dev-server"><code>webpack-dev-server</code></a>搭建一个本地开发服务，安装<code>webpack-dev-server</code>依赖：</p>
</div><div class="cl-preview-section"><pre class="  language-bash"><code class="prism  language-bash"><span class="token function">npm</span> i webpack-dev-server -D
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在<code>package.json</code>增加<code>start</code>的命令：</p>
</div><div class="cl-preview-section"><pre class="  language-json"><code class="prism  language-json"><span class="token punctuation">{</span>
    <span class="token string">"scripts"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token string">"build"</span><span class="token punctuation">:</span> <span class="token string">"webpack --mode production"</span><span class="token punctuation">,</span>
        <span class="token string">"start"</span><span class="token punctuation">:</span> <span class="token string">"webpack-dev-server --mode development --open"</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">为了方便开发，我们将新建了一个<code>webpack.config.dev.js</code>的配置文件：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> HtmlWebPackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'html-webpack-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    mode<span class="token punctuation">:</span> <span class="token string">'development'</span><span class="token punctuation">,</span>
    devtool<span class="token punctuation">:</span> <span class="token string">'cheap-module-source-map'</span><span class="token punctuation">,</span>
    devServer<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        contentBase<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./src/'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        publicPath<span class="token punctuation">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
        host<span class="token punctuation">:</span> <span class="token string">'127.0.0.1'</span><span class="token punctuation">,</span>
        port<span class="token punctuation">:</span> <span class="token number">3000</span><span class="token punctuation">,</span>
        stats<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            colors<span class="token punctuation">:</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    entry<span class="token punctuation">:</span> <span class="token string">'./src/index.jsx'</span><span class="token punctuation">,</span>
    <span class="token comment">// 将 jsx 添加到默认扩展名中，省略 jsx</span>
    resolve<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        extensions<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'.wasm'</span><span class="token punctuation">,</span> <span class="token string">'.mjs'</span><span class="token punctuation">,</span> <span class="token string">'.js'</span><span class="token punctuation">,</span> <span class="token string">'.json'</span><span class="token punctuation">,</span> <span class="token string">'.jsx'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.jsx?$/</span><span class="token punctuation">,</span> <span class="token comment">// jsx文件的正则</span>
                exclude<span class="token punctuation">:</span> <span class="token regex">/node_modules/</span><span class="token punctuation">,</span> <span class="token comment">// 排除 node_modules 文件夹</span>
                use<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                    <span class="token comment">// loader 是 babel</span>
                    loader<span class="token punctuation">:</span> <span class="token string">'babel-loader'</span><span class="token punctuation">,</span>
                    options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                        <span class="token comment">// babel 转义的配置选项</span>
                        babelrc<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
                        presets<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                            <span class="token comment">// 添加 preset-react</span>
                            require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'@babel/preset-react'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                            <span class="token punctuation">[</span>require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'@babel/preset-env'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>modules<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
                        <span class="token punctuation">]</span><span class="token punctuation">,</span>
                        cacheDirectory<span class="token punctuation">:</span> <span class="token boolean">true</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token keyword">new</span> <span class="token class-name">HtmlWebPackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            template<span class="token punctuation">:</span> <span class="token string">'src/index.html'</span><span class="token punctuation">,</span>
            filename<span class="token punctuation">:</span> <span class="token string">'index.html'</span><span class="token punctuation">,</span>
            inject<span class="token punctuation">:</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">对应的<code>package.json</code>的<code>scripts</code>也修改下，start 添加 config 文件路径：</p>
</div><div class="cl-preview-section"><pre class="  language-json"><code class="prism  language-json"><span class="token punctuation">{</span>
    <span class="token string">"scripts"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token string">"build"</span><span class="token punctuation">:</span> <span class="token string">"webpack --mode production"</span><span class="token punctuation">,</span>
        <span class="token string">"start"</span><span class="token punctuation">:</span> <span class="token string">"webpack-dev-server --config './webpack.config.dev.js' --open "</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">到这里，可以执行下<code>npm start</code>看下效果了！</p>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Tips：当然还可以将 webpack.config.js 继续拆分，将公共部分放到<code>webpack.config.base.js</code>部分，然后使用<code>webpack-merge</code>来合并配置项，这里不再展开，参考[TODO](dev。md 相关的文件链接)。</p>
</blockquote>
</div><div class="cl-preview-section"><h4 id="配置-react-的-hmr" style="font-size: 26px;">配置 React 的 HMR</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">热更新是开发阶段很好用的一个功能，配置了热更新就可以让我们在开发过程中，将修改后代码整页面无刷新且保持原有 state 的情况下直接反应到页面，下面我们继续修改 <code>webpack.config.dev.js</code> 并在 App.jsx 增加内容：</p>
</div><div class="cl-preview-section"><pre class="  language-diff"><code class="prism  language-diff">// webpack.config.dev.js
<span class="token inserted">+ const webpack = require('webpack');</span>

module.exports = {
    devServer: {
    ...
<span class="token inserted">+       hot: true,</span>
    ...
    },
    ...
    plugins: [
<span class="token inserted">+       new webpack.HotModuleReplacementPlugin(),</span>
    ...
    ]
    ...
}
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">还需要给对应的文件添加 HMR 对应的代码，打开<code>index.jsx</code>在末尾添加：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">if</span> <span class="token punctuation">(</span>module<span class="token punctuation">.</span>hot<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    module<span class="token punctuation">.</span>hot<span class="token punctuation">.</span><span class="token function">accept</span><span class="token punctuation">(</span>err <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'Cannot apply HMR update.'</span><span class="token punctuation">,</span> err<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">最后，执行<code>npm start</code>，会启动 webpack-dev-server，修改下<code>App.jsx</code>的内容，控制台被重新编译触发了，同时浏览器的热更新已经生效了：</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><img src="http://img.mukewang.com/5cf46fe300012e2e04510334.png" alt="图片描述" data-original="http://img.mukewang.com/5cf46fe300012e2e04510334.png" class="" style="cursor: pointer;"><br>
上面给<code>index.jsx</code>末尾添加的代码，是触发 HMR 的，这部分代码应该不属于业务代码，直接写在文件内对我们代码的侵入性实在是太大，所以建议将它们存入一个<code>dev.js</code>文件中，然后修改 <code>webpack.config.dev.js</code>的 entry，将<code>index.jsx</code>和<code>dev.js</code>合并在一起。</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// webpack.config.dev.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token comment">//...</span>
    entry<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'./src/index.jsx'</span><span class="token punctuation">,</span> <span class="token string">'./src/dev.js'</span><span class="token punctuation">]</span>
    <span class="token comment">//...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><h2 id="webpack-中配置-vue-的开发" style="font-size: 30px;">Webpack 中配置 Vue 的开发</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">上面 React 部分已经详细讲解了一些重复的步骤，这里就简单说下操作步骤和代码。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">首先也是创建目录、初始化 package.json、安装 Vue、安装 Webpack 和安装 Babel。</p>
</div><div class="cl-preview-section"><pre class="  language-bash"><code class="prism  language-bash"><span class="token comment"># 新建目录，并且进入</span>
<span class="token function">mkdir</span> vue-webpack <span class="token operator">&amp;&amp;</span> <span class="token function">cd</span> <span class="token variable">$_</span>
<span class="token comment"># 创建 package.json</span>
<span class="token function">npm</span> init -y
<span class="token comment"># 安装 vue 依赖</span>
<span class="token function">npm</span> i vue
<span class="token comment"># 安装 webpack 和 webpack-cli 开发依赖</span>
<span class="token function">npm</span> i webpack webpack-cli -D
<span class="token comment"># 安装 babel</span>
<span class="token function">npm</span> i babel-loader @babel/core @babel/preset-env -D
<span class="token comment"># 安装 loader</span>
<span class="token function">npm</span> i vue-loader vue-template-compiler -D
<span class="token comment"># 安装 html-webpack-plugin</span>
<span class="token function">npm</span> i html-webpack-plugin -D
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">然后在 src 文件夹下新建<code>App.vue</code>和<code>index.js</code>两个文件，内容如下：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// app.js</span>
<span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./app.vue'</span><span class="token punctuation">;</span>

Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>

<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    render<span class="token punctuation">:</span> h <span class="token operator">=&gt;</span> <span class="token function">h</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">$mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><pre class="  language-html"><code class="prism  language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        Hello Vue &amp; Webpack
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript">
    <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">然后创建一个 HTML 文件<code>index.html</code>：</p>
</div><div class="cl-preview-section"><pre class="  language-html"><code class="prism  language-html"><span class="token doctype">&lt;!DOCTYPE html&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zh-CN<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Webpack Vue Demo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">最后配置<code>webpack.config.js</code>，内容如下：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'html-webpack-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> VueLoaderPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-loader/lib/plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    resolve<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        alias<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            vue$<span class="token punctuation">:</span> <span class="token string">'vue/dist/vue.esm.js'</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        extensions<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'*'</span><span class="token punctuation">,</span> <span class="token string">'.js'</span><span class="token punctuation">,</span> <span class="token string">'.vue'</span><span class="token punctuation">,</span> <span class="token string">'.json'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.js$/</span><span class="token punctuation">,</span>
                exclude<span class="token punctuation">:</span> <span class="token regex">/node_modules/</span><span class="token punctuation">,</span>
                use<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                    loader<span class="token punctuation">:</span> <span class="token string">'babel-loader'</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.vue$/</span><span class="token punctuation">,</span>
                loader<span class="token punctuation">:</span> <span class="token string">'vue-loader'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token keyword">new</span> <span class="token class-name">VueLoaderPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            template<span class="token punctuation">:</span> <span class="token string">'./src/index.html'</span><span class="token punctuation">,</span>
            filename<span class="token punctuation">:</span> <span class="token string">'index.html'</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">Vue 的配置文件跟 React 最大区别是，React 是直接扩展了 Babel 的语法，而 Vue 语法的模板还需要使用<code>vue-loader</code>来处理。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">完成上面配置后，执行下<code>npx webpack</code>看下 dist 产出吧。开发相关的配置跟 React 部分基本一致，这里不再重复介绍了。</p>
</div><div class="cl-preview-section"><h2 id="title小结---" style="font-size: 30px;"><div class="summary"><h5 class="centertitle" style="font-size: 20px; line-height: 38px;">小结 </h5></div><!--title:&#23567;&#32467; --></h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本文从一个项目搭建开始介绍了 React 和 Vue 两个时下最流行的 JavaScript 库的 Webpack 配置。由于 React 和 Vue 自身语法跟普通的 ES6 语法不同，所以需要配置对应的<code>loader</code>或者 Babel 插件。</p>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                        <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/29/article/272">
                                                    <div class="prev l clearfix">
                                <div class="icon l">
                                    <i class="imv2-arrow3_l"></i>
                                </div>
                                <p>
                                    14 Webpack Dev Server 本地开发服务
                                </p>
                            </div>
                        </a>
                                                                                            <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/29/article/274">
                                                    <div class="next r clearfix">
                                <p>
                                     16 Webpack 环境相关配置及配置文件拆分
                                </p>
                                <div class="icon r">
                                    <i class="imv2-arrow3_r"></i>
                                </div>

                            </div>
                        </a>
                                    </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">     <div class="number">精选留言 <span class="js-number">0</span></div>     <div class="comments">         <div class="input-fake js-showcommentModal">             欢迎在这里发表留言，作者筛选后可公开显示         </div>                      <div class="noData">                 <p>                     <i class="imv2-error_c"></i>                 </p>                 <p>目前暂无任何讨论</p>             </div>              </div>  </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>